<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <!-- 匿名插槽：用来收留无家可归的标签，没有匿名插槽标签就会被抛弃。 -->
    <child-component>
      <p>我是一些内容</p>
      <p>我也是一些内容</p>
    </child-component>
    <hr>
    <!-- 具名插槽：将能够与插槽的名字对应上的标签放在对应的位置 -->
    <zwh>
      <p>我是main0</p>
      <p slot="footer">我是footer</p>
      <p>我是main1</p>
      <p>我是main2</p>
      <p slot="header">我是header</p>
      <p>我是main3</p>
    </zwh>
    <hr>
    <pl>
      <template slot-scope="pl">
        <p>78787</p>
        <h1>{{pl.msg}}</h1>
        <h1>{{pl.age}}</h1>
      </template>
    </pl>
    <hr>
    <hr>
    <!-- :books="books"父组件向子组件传值，books是父组件中的数据 -->
    <my-list :books="books">
      <template slot="book" slot-scope="item">
        <li>{{item.bookName}}</li>
      </template>
    </my-list>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    let vm = new Vue({
      el: '#app',
      data: function() {
        return {
          isShow: true,
          // 这条数据用于作用域插槽的循环展示
          books: [
            {name: '三体'},
            {name: '人类简史'},
            {name: '经济学原理'},
            {name: 'JavaScript高级程序设计'}
          ]
        }
      },
      components: {
        'child-component': {
          template: 
          `
            <div v-if="isShow" class="default-slot">
              <!-- 单个插槽，没有名字 -->
              <slot>我是默认的内容，如果组件内没有信息，我就会显示。</slot>
            </div>
          `,
          data() {
            return {
              isShow: true
            }
          },
        },
        zwh: {
          template: 
          `
            <div>
              <!-- 具名插槽,对号入座 -->
              <div class="header">
                <slot name="header"></slot>
              </div>
              <div class="main">
                <slot></slot>
              </div>
              <div class="footer">
                <slot name="footer"></slot>
              </div>
            </div>
          `,
          mounted() {
            let header = this.$slots.header
            console.log(header)
          },
        },
        pl: {
          template: 
          `
            <div>
              <slot :msg="name" age="18"></slot>
            </div>
          `,
          data() {
            return {
              name: '邓雷'
            }
          },
        },
        'my-list': {
          template: 
          `
            <ul>
              <slot name="book" v-for="(book,index) in books" 
                :book-name="book.name"></slot>
            </ul>
          `,
          props:{
            books: {
              type: Array,
              default: function() {
                return []
              }
            }
          }
        }
      }
    })
  </script>
</body>
</html>